<template>
  <div class="personal-cont">
    <Row :gutter="24">
      <Col :span="2" v-for="(item, index) in renderList" :key="index">
        <div
          :class="{ 'personal-item': true, active: index === currentChecked }"
          @click="handleItem(item, index)"
          :title="item.name"
        >
          {{ item.name }}
        </div>
      </Col>
      <Col :span="2" style="display: flex" v-if="list.length >= 23">
        <div class="expend-all" @click="handleOpen">
          <span class="tips">{{ isOpenAll ? '收起人员' : '展开全部' }}</span>
          <DownOutlined color="#1153D8" v-if="!isOpenAll" />
          <UpOutlined color="#1153D8" v-else />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';

  const $emit = defineEmits(['change']);
  const $props = defineProps({
    list: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });

  const isOpenAll = ref<boolean>(false);

  const renderList = ref<any[]>([]);

  watch(
    () => $props.list,
    (val) => {
      if ($props.list.length > 23) {
        renderList.value = val.slice(0, 23);
      } else {
        renderList.value = val;
      }
    },
    { immediate: true },
  );

  // 设置选中项
  const setChecked = (index: number) => {
    if ($props.list.length) handleItem($props.list[index], index);
  };

  const handleOpen = () => {
    isOpenAll.value = !isOpenAll.value;
    if (isOpenAll.value) {
      renderList.value = $props.list;
    } else {
      renderList.value = $props.list.slice(0, 23);
    }
  };

  const currentChecked = ref<number>(-1);

  const handleItem = (item: any, index: number) => {
    currentChecked.value = index;
    $emit('change', item);
  };

  defineExpose({ setChecked });
</script>

<style lang="less" scoped>
  .personal-cont {
    background: #fff;
    padding: 0 16px;
    margin: 0 !important;
    border-bottom: 1px solid #e9e9e9;

    .personal-item {
      padding: 6px;
      background: rgba(17, 83, 216, 0.03);
      border-radius: 4px;
      margin: 8px 0;
      text-align: center;
      font-size: 14px;
      color: #333;
      border: 1px solid rgba(17, 83, 216, 0.03);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .active {
      border-color: #1153d8;
      color: #1153d8;
    }

    .expend-all {
      display: flex;
      font-size: 14px;
      align-items: center;
      cursor: pointer;
      color: #1153d8;
    }
  }
</style>
